<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color:cadetblue;height: 120px;">

                <h1 style="padding-left: 60px;padding-top: 20px;color:white;">
                    Hello ! 你好 , Admin</h1>
                <h4 style="padding-top: 20px;padding-left: 100px;;color:white;">欢迎使用网格化治理平台！</h4>
            </el-header>
            <el-main>
                <div style="padding-top: 20px;padding-left: 20px;padding-top: 50px;">
                    首次登录系统 , 请根据引导完成以下操作步骤 ! <span style="color:red;">@</span>
                </div>
                <div style="padding-top: 30px;padding-left: 300px;padding-left: 350px;">
                    <el-steps style="max-width: 600px" :active="active" finish-status="success" @change="Shpw">
                        <el-step title="创建网格层级" />
                        <el-step title="创建网格" />
                        <el-step title="创建网格队伍" />
                        <el-step title="登录系统" />
                    </el-steps>
                </div>
                <div align="center" style="padding-top: 50px;">

                    <el-card class="box-card" style="background-color:#d1edc4;border: 1px solid cadetblue">
                        <h4 style="padding-bottom: 20px;color:cadetblue;">创建成功！</h4>
                        <h4 style="padding-bottom: 20px;"> 您的网格体系已创建成功，现在可以登录平台体验其它功能模块为您提供的服务。</h4>
                    </el-card>
                </div>
                <div style=" padding-top: 60px;padding-left: 800px;">
                    <el-button style="margin-top: 12px" @click="te">上一步</el-button>
                    <el-button style="margin-top: 12px;background-color: aqua;" @click="next">确定</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">

import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const active = ref(4)
const router = useRouter();

const next = () => {
    if (active.value++ > 2) active.value = 0
}
const te = () => {
    router.push('/src/views/GriMent/Create_team.vue')
}
const Shpw = () => {
    router.push('/src/views/GriMent/Basic_grid.vue')
}

</script>

<style>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 800px;
    height: 110px;
}
</style>